<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      During the War of the Five Kings, Robb Stark, also known as the Young
      Wolf, fought Lord Tywin Lannister in various battles in the Riverlands. In
      the mean time, Mace Tyrell declared for King Renly Baratheon even though
      his elder brother Stannis Baratheon had a better claim to the throne.
      Across the narrow sea, Daenerys Targaryen hatched three dragons and
      crowned herself Queen of Meereen.
    </div>

    <div>
      During the War of the Five Kings,
      <span class="stark"><span class="first">Robb</span> Stark</span>, also
      known as the Young Wolf, fought Lord
      <span class="lannister"><span class="first">Tywin</span> Lannister</span>
      in various battles in the Riverlands. In the mean time,
      <span class="important"
        ><span class="tyrell"><span class="first">Mace</span> Tyrell</span>
        declared for King
        <span class="baratheon"
          ><span class="first">Renly</span> Baratheon</span
        >
        even though his elder brother
        <span class="baratheon"
          ><span class="first">Stannis</span> Baratheon</span
        >
        had a better claim to the throne</span
      >. Across the narrow sea,
      <span class="targaryen"
        ><span class="first">Daenerys</span> Targaryen</span
      >
      hatched three dragons and crowned herself Queen of Meereen.
    </div>

    <script>
      const queries = [
        [{ start: 34, end: 44 }, 'stark'],
        [{ start: 88, end: 103 }, 'lannister'],
        [{ start: 160, end: 171 }, 'tyrell'],
        [{ start: 190, end: 205 }, 'baratheon'],
        [{ start: 236, end: 253 }, 'baratheon'],
        [{ start: 311, end: 329 }, 'targaryen'],
        [{ start: 34, end: 38 }, 'first'],
        [{ start: 88, end: 93 }, 'first'],
        [{ start: 160, end: 164 }, 'first'],
        [{ start: 190, end: 195 }, 'first'],
        [{ start: 236, end: 243 }, 'first'],
        [{ start: 311, end: 319 }, 'first'],
        [{ start: 160, end: 286 }, 'important'],
      ];
    </script>
  </body>
</html>
